<template>
	<view class="circleDetail fboxCol" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom :isSpace="false" :isCircle="true" :isBlur="false" linkId="usr18scm9e5dhp38" :linkData="linkData"></HeadCustom>
		<view class="qzHeader fboxCol" id="mineXxRef" :style="{ 'background-image': 'url(' + detailData.background + ')' }">
			<!-- #ifndef MP-TOUTIAO -->
			<view class="spaceBar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="spaceHead"></view>
			<!-- #endif -->
			
			<view class="fboxRow">
				<image class="img_box" :src="detailData.groupAvatar" mode="aspectFill"></image>
				<view class="flex1">
					<view class="fboxRow Ycenter">
						<view class="font-ell1 flex1 name_p font34">
						{{ detailData.groupName }}
						</view>
						<view class="addQz bg-gray fboxRow Ycenter Xcenter font24" v-if="detailData.isWaitAudit"><text class="txt1">待通过</text></view>
						<view class="addQz fboxRow Ycenter Xcenter font24 bg-linear" @tap="openJion" v-else-if="!detailData.isMemberChat">加入</view>
					</view>
					<view class="font-ell2 groupDesc_p lh40 font28">{{ detailData.groupDesc }}</view>
					<!-- <text v-if="detailData.isPublic == 1">公开</text>
					<text>成员{{ detailData.memberCount }}人</text> -->
				</view>
			</view>
			<!-- <p class="font-ell2 groupDesc_p">{{ detailData.groupDesc }}</p> -->
			<view class="countDown fboxRow Ycenter Xbetween" v-if="detailData.deadlineDate">
				<text class="counDownNmae">{{ detailData.name }}</text>
				<u-count-down :time="timeAll" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
					<view class="time">
						<text class="time__item">
							还剩
							<text class="num_text">{{ timeData.days }}</text>
							天
						</text>
						<text class="num_text">
							{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}:{{ timeData.minutes > 10 ? timeData.minutes : '0' + timeData.minutes }}:{{
								timeData.seconds > 10 ? timeData.seconds : '0' + timeData.seconds
							}}
						</text>
					</view>
				</u-count-down>
			</view>
			<view class="header_bottom fboxRow">
				<view class="item">
					
				</view>
				<text class="bw-Vector9 bwfont font24 fboxRow Ycenter Xcenter"></text>
				<text @click="openGg" class="fboxRow Xcenter Ycenter bottom_gg font28">公告</text>
				<!-- <text></text> -->
			</view>
		</view>
		<view class="qzContent flex1">
			<view class="ddDtail" v-for="(item, index) in myddList" :key="index"><DynamicItem :innerData="item" type="circle" @login="login"></DynamicItem></view>
			<!-- <NotEmpty :height="200" v-if="myddList.length == 0"></NotEmpty> -->
			<u-loadmore fontSize="24rpx" v-if="isShow" :status="listConfig.loading" />
		</view>
		<not-login bottom="160rpx" ref="notLogin" />
		<view class="">
			<u-popup :show="isJoin" @close="isJoin = false" mode="center">
				<view class="join-Modal">
					<view class="close" @click="isJoin = false"><u-icon name="close" color="#6B707C" size="20"></u-icon></view>
					<view class="hd font30 lh44 color-E8CDA7">申请加入圈子</view>
					<view class="bd">
						<view class="tips color-ACB4C7 font30 lh44">加入本圈子需要圈主批注。请写下您的加入理由：文字长度限100个字符（50个汉字）</view>
						<textarea class="text bg-21242C mt24" v-model="applyReason"></textarea>
					</view>
					<view class="ft mt32 fboxRow Xend">
						<view class="btn fboxRow Ycenter Xcenter border-E8CDA7 color-E8CDA7 font26" @click="isJoin = false">取消</view>
						<view class="btn fboxRow Ycenter Xcenter bg-linear color-141720 font26" @click="joinPost">申请加入</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="isTips" @close="isTips = false" mode="center">
				<view class="join-Modal tips-modal ">
					<view class="close" @click="isTips = false"><u-icon name="close" color="#6B707C" size="20"></u-icon></view>
					<view class="bd"><view class="tips  fboxRow Xcenter Ycenter font30 lh44">加入申请已提交，等待圈主确认</view></view>
					<view class="ft fboxRow Xcenter"><view class="btn fboxRow Ycenter Xcenter bg-linear color-141720 font26" @click="isTips = false">知道了</view></view>
				</view>
			</u-popup>
		</view>

		<view class="">
			<u-popup :show="announcementShow" :round="10" mode="center" @close="announcementShow = false">
				<view class="announcementModel">
					<view class="fboxRow Ycenter Xcenter">{{ announcementObj.title }}</view>
					<view class="fboxRow ">
						<view class="flex1 fboxRow Ycenter Xcenter" @tap="cancelButton">取消</view>
						<view class="flex1 fboxRow Ycenter Xcenter" @tap="confirmButton">{{ announcementObj.confirmText }}</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import DynamicItem from '@/components/circle/dynamic-item.vue';
import { getUserHome, getCircleDynamicAll, getGroupInfo, getGroupList, circleJoin } from '@/api/mine.js';
import { debounce } from '@/static/js/common.js';
import { judgeIsLogin } from '@/static/js/common.js';
export default {
	components: { DynamicItem },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			myddList: [],
			groupId: '',
			detailData: {},
			timeData: {},
			isShow: false,
			announcementShow: false,
			timeAll: 0,
			// 申请进入圈子的备注信息
			applyReason: '',
			isJoin: false,
			isTips: false,
			listConfig: {
				loading: ''
			},
			announcementObj: {
				title: '你还没有加入该圈子哦！',
				confirmText: '我要加入'
			},
			page: {
				current: 1,
				size: 20,
				total: 0
			},
			linkData: {
				id: ''
			},
			statusBarHeight: getApp().globalData.statusBarHeight
		};
	},
	created() {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		if (!getApp().globalData.statusBarHeight) {
			const sys = uni.getSystemInfoSync();
			this.statusBarHeight = sys.statusBarHeight;
		}
		// #ifdef MP
		// 根据胶囊按钮距离， 设置导航高度
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		this.statusBarHeight = menuButtonInfo.top;
		// #endif
	},
	onLoad(options) {
		if (options && options.id) {
			this.groupId = options.id;
			this.linkData.id = options.id;
			this.getInit();
		}
		uni.setNavigationBarTitle({
			title: `圈子详情`
		});
	},
	onReachBottom() {
		if (this.page.size * this.page.current <= this.page.total) {
			this.listConfig.loading = 'loading';
			this.page.size += 10;
			this.getDdData();
		} else {
			this.listConfig.loading = 'nomore';
		}
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getInit();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		login() {
			this.$refs.notLogin.openLogin({
				show: true,
				position: 'center'
			});
		},
		openJion() {
			if (!judgeIsLogin()) {
				this.login();
				return;
			}
			if (this.detailData.isAudit == 0) {
				this.addCircle();
			} else {
				this.isJoin = true;
			}
		},
		addCircle: debounce(function(event) {
			const obj = {
				groupId: this.groupId
			};
			circleJoin({ ...obj }).then(res => {
				if (res.data == 0) {
					uni.showToast({
						icon: 'none',
						title: '加入成功'
					});
					this.detailData.isMemberChat = true;
				}
			});
		}, 2000),
		// 申请加入圈子
		joinPost: debounce(function(event) {
			if (!this.applyReason) {
				uni.showToast({
					title: '请填写申请原因',
					icon: 'none'
				});
				return;
			}
			const obj = {
				applyReason: this.applyReason,
				groupId: this.groupId
			};
			circleJoin({ ...obj }).then(res => {
				if (res.data == 1) {
					this.isJoin = false;
					this.isTips = true;
					this.detailData.isWaitAudit = true;
				}
				this.detailData.isMemberChat = true;
			});
		}, 2000),
		onChange(e) {
			this.timeData = e;
		},
		// 初始化
		getInit() {
			this.getCircleData();
			this.getDdData();
		},
		confirmButton() {
			this.announcementShow = false;
			if (!judgeIsLogin()) {
				this.login();
				return;
			}
			if (this.detailData.isWaitAudit) {
				return;
			}
			this.openJion();
		},
		cancelButton() {
			this.announcementShow = false;
		},
		// 打开公告
		openGg() {
			if (!this.detailData.isMemberChat) {
				if (this.detailData.isWaitAudit) {
					this.announcementObj.confirmText = '知道了';
					this.announcementObj.title = '已经申请加入，正在审核中！';
				}
				this.announcementShow = true;
				return;
			}
			this.$pageTo('/circle/circleAnnouncement?groupId=' + this.groupId);
		},
		// 获取群组点点 详情
		getDdData() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			getGroupList({ ...this.page, groupId: this.groupId })
				.then(res => {
					this.myddList = res.data.list;
					this.page.total = res.data.total;
					this.isShow = true;
					if (res.data.size * res.data.current <= res.data.total) {
						this.listConfig.loading = 'loading';
					} else {
						this.listConfig.loading = 'nomore';
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 获取圈子详情
		getCircleData() {
			getGroupInfo({ groupId: this.groupId }).then(res => {
				this.detailData = res.data;
				// let mineXxRef = document.getElementById('mineXxRef');
				// mineXxRef.style.backgroundImage = 'url("' + this.detailData.background + '")';
				this.countTime(this.detailData.deadlineDate);
			});
		},
		// 倒计时
		countTime(djs) {
			this.timeAll = new Date(djs) - new Date();
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-popup__content {
	border-radius: 18rpx;
	background-color: transparent;
}
.join-Modal {
	position: relative;
	padding: 40rpx 32rpx 48rpx;
	width: 670rpx;
	background: var(--controllerBgColor);
	border-radius: 12rpx;
}
.join-Modal .bd {
	margin-top: 48rpx;
}
.join-Modal .text {
	padding: 24rpx;
	width: 558rpx;
	height: 132rpx;
	border-radius: 12rpx;
}
.join-Modal .btn {
	width: 160rpx;
	height: 56rpx;
	border-radius: 8rpx;
}
.join-Modal .btn + .btn {
	margin-left: 24rpx;
}
.join-Modal .close {
	position: absolute;
	right: 32rpx;
	top: 32rpx;
}
.join-Modal.tips-modal .bd {
	margin-top: 100rpx;
}
.join-Modal.tips-modal .ft {
	margin-top: 60rpx;
}
.announcementModel {
	width: 670rpx;
	background: var(--controllerBgColor);
	border-radius: 12rpx;
	> view {
		&:first-child {
			padding: 50rpx 0;
			border-bottom: 1px solid var(--viewBgColor);
		}
		> view {
			padding: 30rpx 0;
			&:first-child {
				border-right: 1px solid var(--viewBgColor);
			}
			&:last-child {
				color: #e8cda7;
			}
		}
	}
}
.circleDetail {
	min-height: 100vh;
	.qzHeader {
		padding: 30rpx 40rpx 40rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		flex-shrink: 0;
		color: var(--contentBgImageTitleColor);
		.name_p{line-height: 48rpx;}
		.groupDesc_p {margin-top: 12rpx;font-weight: 300;}
		.countDown {
			height: 72rpx;
			background: rgba(26, 29, 37, 0.5);
			border-radius: 12rpx;
			padding: 0 10rpx;
			.num_text {
				padding: 2rpx 10rpx;
				margin: 0 10rpx;
				background-color: var(--darkViewBgColor);
				color: #f7f9ff;
				border-radius: 6rpx;
				letter-spacing: 5rpx;
				width: 82rpx;
			}
			.counDownNmae {
				color: #acb4c7;
				&:first-child {
					&::before {
						content: url('https://ebc-prod.cdn.benwunet.com/uni-static/h5/schedule.png');
						vertical-align: middle;
						margin-right: 10rpx;
					}
				}
			}
		}
		.header_bottom {
			color: #f7f9ff;
			margin-top: 40rpx;
			.bw-Vector9{ margin-right: 6rpx; width: 40rpx;height: 40rpx;background: linear-gradient(270deg, #7C64FF 0%, #A596FD 100%);border-radius: 8rpx}
			// .bottom_gg {
			// 	&:first-child {
			// 		&::before {
			// 			content: url('https://ebc-prod.cdn.benwunet.com/uni-static/h5/volume_up.png');
			// 			margin-right: 10rpx;
			// 		}
			// 	}
			// }
		}
		// > view {
		// 	margin-bottom: 30rpx;
		// 	> view {
		// 		> p {
		// 			margin-bottom: 10rpx;
		// 			font-weight: 500;
		// 			color: #f7f9ff;
		// 			font-size: 34rpx;
		// 			line-height: 50rpx;
		// 		}
		// 		> text {
		// 			&:last-child {
		// 				border: none;
		// 				color: #f7f9ff;
		// 			}
		// 			border: 1rpx solid #e8cda7;
		// 			color: #e8cda7;
		// 			padding: 0rpx 15rpx;
		// 			border-radius: 4rpx;
		// 			font-size: 22rpx;
		// 			margin-right: 10rpx;
		// 		}
		// 	}
		// }
		.img_box {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
			object-fit: cover;
		}
		.bg-gray{background: #E8EDF1;color: var(--contentFontLightColor);}
		.addQz {
			margin-left: 10rpx;
			width: 96rpx;
			height: 40rpx;
			border-radius: 4rpx;
			// .txt1 {
			// 	background-color: rgba(54, 58, 67, 0.9);
			// 	color: #e8cda7;
			// 	border: none;
			// 	padding: 10rpx 30rpx;
			// 	border-radius: 8rpx;
			// }
			// .txt2 {
			// 	background-color: rgba(232, 205, 167, 0.9);
			// 	color: var(--controllerBgColor);
			// 	padding: 10rpx 30rpx;
			// 	border-radius: 8rpx;
			// }
		}
	}
	.qzContent {
		padding: 24rpx;
	}
}
</style>
